/* 
* @Author: Turbidsoul Chen
* @Date:   2016-11-28 15:43:43
* @Last Modified by:   Turbidsoul
* @Last Modified time: 2017-01-26 16:38:13
*/

import React, { Component } from 'react';
import {observer, inject} from 'mobx-react';
import TodoItem from './TodoItem';
import {Panel, List, Input, Button, Icon} from 'amazeui-react';

@inject('todoStore')
@observer
export default class TodoList extends Component {
  static propTypes = {
    todoStore: React.PropTypes.object.isRequired
  };

  constructor() {
    super();
  }

  get label() {
    return 'Todo';
  }

  addNewTodo(e) {
    e.preventDefault();
    let res = this.refs.todoContent.getValue();
    if(res !== null && res.length > 0) {
      this.props.todoStore.addTodo(res);
      this.refs.todoContent.getFieldDOMNode().value = '';
    }
  }
  enterInput(e) {
    // e.preventDefault();
    if(e.key === 'Enter') {
      this.addNewTodo(e);
    }
  }
  render() {
    return (
      <Panel amStyle="primary">
        {this.props.todoStore.report}
        <Input
          round
          amSize="sm"
          amStyle="primary"
          ref="todoContent"
          placeholder="请输入待办事项"
          btnAfter={<Button amStyle="primary" onClick={::this.addNewTodo}><Icon icon="plus"/></Button>}
          onKeyPress={::this.enterInput}/>
        <List>
          {this.props.todoStore.todos.map((todo, idx)=>{
            return <TodoItem todo={todo} key={idx} index={idx}/>;
          })}
        </List>
        {this.props.todoStore.pendingRequests > 0 ? <marquee>Loading</marquee> : null}
      </Panel>
    );
  }
}

